<form id="component-form-step-1" class="layui-form" action="" lay-filter="component-form-step-1">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input" v-model="username">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" v-model="password">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phone" required  lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input" v-model="phone">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input" v-model="email">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-inline">
                <input type="text" name="nick_name" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input" v-model="nick_name">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">真实姓名</label>
            <div class="layui-input-inline">
                <input type="text" name="real_name" required  lay-verify="required" placeholder="请输入真实姓名" autocomplete="off" class="layui-input" v-model="real_name">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户简介</label>
            <div class="layui-input-inline">
                <input type="text" name="remark" required  lay-verify="required" placeholder="请输入用户简介" autocomplete="off" class="layui-input" v-model="remark">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">是否锁定</label>
            <div class="layui-input-block">
                <input type="checkbox" name="lock" lay-skin="switch" lay-filter="lock" value="1">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-inline">
                <select name="sex" lay-verify="required" lay-search="" lay-filter="sex">
                    <option value="0">无</option>
                    <option value="1">男</option>
                    <option value="2">女</option>
                </select>
            </div>
        </div>
    </div>
</form>

<script>
    //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
    layui.use(['upload','form'], function(){
        var upload = layui.upload;
        var $ = layui.jquery;
        var form = layui.form;
        // var add_step1 = {};

        // 初始化一个VUE对象
        var add_step1 = new Vue({
            'el' : '#component-form-step-1',
            'data' : {
                username : '',
                password : '',
                phone : '',
                email : '',
                nick_name : '',
                real_name : '',
                remark : '',
                lock : '',
                sex : '0'
            },
            methods : {

            },
            watch : {
                lock : function (newVal,oldVal) {
                    var self = this;
                    form.val("component-form-step-1", {
                        lock : newVal==1
                    });
                },
                sex : function (newVal,oldVal) {
                    // 模拟选中事件
                    $('select[name="sex"]').next().find('.layui-anim').children('dd[lay-value="'+newVal+'"]').click();
                }
            }
        });

        (function (add_step1) {
            // 更新 lay-filter="test1" 所在容器内的全部表单状态
            form.render(null,'component-form-step-1');
            // 性别
            form.on('select(sex)',function (ret) {
                add_step1.sex = ret.value;
            });

            // 是否锁定
            form.on('switch(lock)', function(ret){
                // console.log(ret);
                // layer.tips('开关checked：'+ (this.checked ? 'true' : 'false'), ret.othis)
                add_step1.lock = this.checked ? '1' : '0';
            });
        })(add_step1);

        if(commParam['info'] !== null){
            // 编辑入参
            var param = commParam['info'];
            add_step1.username = param['username'];
            // add_step1.password = param['password'];
            add_step1.phone = param['phone'];
            add_step1.email = param['email'];
            add_step1.nick_name = param['nick_name'];
            add_step1.real_name = param['real_name'];
            add_step1.remark = param['remark'];
            add_step1.lock = param['lock'];
            add_step1.sex = param['sex'];
        }

        // 暴漏给外部
        window.add_step1 = add_step1;
    });
</script>